Marketing Agency HTML Template
First of all, thank you so much for purchasing this theme and for being our loyal customer.
You are awesome!
You are entitled to get free lifetime updates to this product + exceptional support from the author directly.
This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly.
This guide covers all the needed information for building an amazing website, as well as some helpful tips and tricks that will make your experience working with this theme easier and more enjoyable. If you need any additional assistance while using the theme, you can always contact us via email and our support team will be glad to help you out.
SeoEs has a fixed layout with up to 12 columns. All the information within the main content area is nested within a div. The general template structure is the same throughout the template as it uses the Bootstrap framework.
The multi column layout consists of the .col-md-(from 1 to 12) classes. See Bootstrap documentation here: https://getbootstrap.com/
We're using the following CSS files in this template. Those files also contain some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind that these values might be overridden somewhere else in the files below:
At first glance, the CSS may look confusing, let me explain each below:
Main CSS Files
style.css file contains specific stylings for the page. The file is separated into sections using:
01- Google Fonts
02- General Variables
03- General Styling
03.1- Paddings
03.2- Margins
03.3- Overlap
03.4- Default Colors
03.5- Gradient Colors
03.6- Background Shape
03.7- Z Index
03.8- Container
03.9- Wide Sec
03.10- Column Gap
03.11- Fonts Typography
03.12- Parallax Background
03.13- Background Layer
03.14- Opacity
03.15- Iframe
03.16- Width
03.17- Cross Browser Compatibility
03.18- Border Radius
03.19- Particles
03.20- Animations
03.21- Slick Arrow
03.22- Slick Dots
03.23- Social Media
04- Page Loader Style
05- Header Styles
05.1- Dropdown
05.2- Header Search
05.3- Header Style 1
05.4- Header Style 2
05.5- Header Style 3
06- Sticky Header
07- Responsive Header
07.1- Responsive Menu
08- Theme Button
Javascript Files and Structure
<link rel="stylesheet" href="assets/css/all.min.css">
<link rel="stylesheet" href="assets/css/flaticon.css">
<link rel="stylesheet" href="assets/css/animate.min.css">
<link rel="stylesheet" href="assets/css/aos.min.css">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/jquery.fancybox.min.css">
<link rel="stylesheet" href="assets/css/perfect-scrollbar.css">
<link rel="stylesheet" href="assets/css/slick.css">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/responsive.css">
These are the list of Javascript files that are loaded into templates in end of the Body Section.
Google Fonts
The template usually loads fonts from Google Web Fonts Direcotry, you can change the font with the one that suits you best.
@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap);
You can customize this template according to your needs. Here are some basic changes you might need.
Logo Change
Just replace the image with your own one:
<div class="logo"> < h1 class="mb-0"> < a href="index.html" title="Home"> < img width="185" src="assets/images/logo@2x.png" alt="Logo"> < /a> < /h1> < /div< !-- Logo -->
Apply the above steps to every HTML page you need.
Menu Items
Bellow code shows the way to edit your menu items:
<nav>
<ul class="d-inline-flex flex-wrap align-items-center mb-0 list-unstyled">
<li class="menu-item-has-children"> <a href="javascript:void(0);" title=""> Home</a>
<ul class="children mb-0 list-unstyled">
<li> <a href="index.html" title=""> SEO Agency</a> </li>
<li> <a href="index2.html" title=""> Marketing Agency</a> </li>
<li> <a href="index3.html" title=""> SEO Consultant</a> </li>
<li> <a href="index4.html" title=""> StartUp Agency</a> </li>
<li> <a href="index5.html" title=""> App Landing</a> </li>
</ul>
</li>
<li class="menu-item-has-children"> <a href="javascript:void(0);" title=""> Pages</a>
<ul class="children mb-0 list-unstyled">
<li> <a href="seo-services.html" title=""> SEO Services</a> </li>
<li> <a href="ppm-services.html" title=""> PPM Services</a> </li>
<li> <a href="digital-marketing.html" title=""> Digital Marketing</a> </li>
<li> <a href="about.html" title=""> About Us</a> </li>
<li> <a href="our-story.html" title=""> Our Story</a> </li>
<li> <a href="team.html" title=""> Our Team</a> </li>
<li> <a href="content-elements.html" title=""> Content Elements</a> </li>
<li> <a href="pricing-table.html" title=""> Pricing Tables</a> </li>
</ul>
</li>
<li class="menu-item-has-children"> <a href="javascript:void(0);" title=""> Portfolio</a>
<ul class="children mb-0 list-unstyled">
<li> <a href="portfolio-masonry.html" title=""> Masonry</a> </li>
<li> <a href="portfolio-masonry-filters.html" title=""> With Filter</a> </li>
<li> <a href="portfolio-3column-full-width.html" title=""> Full Width</a> </li>
<li> <a href="portfolio-2column.html" title=""> Two Columns</a> </li>
<li> <a href="portfolio-4column-full-width.html" title=""> Four Columns</a> </li>
<li> <a href="gallery.html" title=""> Gallery</a> </li>
<li class="menu-item-has-children"> <a href="javascript:void(0);" title=""> Portfolio Singles</a>
<ul class="children mb-0 list-unstyled">
<li> <a href="data-analysis.html" title=""> Small Images</a> </li>
<li> <a href="content-audit.html" title=""> Big Images</a> </li>
<li> <a href="new-strategies.html" title=""> Slider</a> </li>
<li> <a href="creative-campaigns.html" title=""> Two Cols Gallery</a> </li>
<li> <a href="market-intelligence.html" title=""> Three Cols Gallery</a> </li>
</ul>
</li>
</ul>
</li>
<li class="menu-item-has-children"> <a href="javascript:void(0);" title=""> Blog</a>
<div class="megamenu center">
<div class="row mrg40">
<div class="col-md-4 col-sm-6 col-lg-4">
<h4> Blog</h4>
<ul class="mb-0 list-unstyled">
<li> <a href="blog-checkerboard.html" title=""> Checkerboard</a> </li>
<li> <a href="blog-masonry.html" title=""> Masonry</a> </li>
<li> <a href="blog-2column.html" title=""> Two Columns</a> </li>
<li> <a href="blog-3column.html" title=""> Three Columns</a> </li>
<li> <a href="blog-3column-full-width.html" title=""> Three Columns Full Width</a> </li>
<li> <a href="blog-4column-full-width.html" title=""> Four Columns Full Width</a> </li>
</ul>
</div>
<div class="col-md-4 col-sm-6 col-lg-4">
<h4> Standard</h4>
<ul class="mb-0 list-unstyled">
<li> <a href="blog-checkerboard.html" title=""> List View</a> </li>
<li> <a href="blog-checkerboard.html" title=""> Medium Images</a> </li>
<li> <a href="blog-checkerboard.html" title=""> Without Sidebar</a> </li>
<li> <a href="blog-left-sidebar.html" title=""> Left Sidebar</a> </li>
<li> <a href="blog-right-sidebar.html" title=""> Right Sidebar</a> </li>
</ul>
</div>
<div class="col-md-4 col-sm-6 col-lg-4">
<h4> Post Types</h4>
<ul class="mb-0 list-unstyled">
<li> <a href="blog-detail-gallery.html" title=""> Gallery</a> </li>
<li> <a href="blog-detail-audio.html" title=""> Audio</a> </li>
<li> <a href="blog-detail-link.html" title=""> Link</a> </li>
<li> <a href="blog-detail-quote.html" title=""> Quote</a> </li>
<li> <a href="blog-detail.html" title=""> Image</a> </li>
<li> <a href="blog-detail-video.html" title=""> Video</a> </li>
</ul>
</div>
</div>
</div>
</li>
<li class="menu-item-has-children"> <a href="javascript:void(0);" title=""> Shop</a>
<ul class="children mb-0 list-unstyled">
<li> <a href="shop.html" title=""> Shop</a> </li>
<li> <a href="shop-detail.html" title=""> Shop Detail</a> </li>
<li> <a href="cart.html" title=""> Cart</a> </li>
<li> <a href="checkout.html" title=""> Checkout</a> </li>
<li> <a href="shop-shortcodes.html" title=""> Shortcodes</a> </li>
</ul>
</li>
<li> <a href="contact.html" title=""> Contacts</a> </li>
</ul>
</nav>
Apply the above steps to every HTML page you need.
Image Slider:
Our template uses a very powerful Revolution Slider plugin. The slider's documentation may be found here.
Typography:
@import url(http://fonts.googleapis.com/css?family=Happy+Monkey);
.main-menu .navigation > li > a{
position:relative;
display:block;
text-align:center;
opacity:1;
font-size: 16px;
line-height: 36px;
font-weight:500;
color:#ffffff;
padding: 23px 16px;
-webkit-transition:all 300ms ease;
-moz-transition:all 300ms ease;
-ms-transition:all 300ms ease;
-o-transition:all 300ms ease;
transition:all 300ms ease;
}
Replace font family 'Happy Monkey' with your own one in the code above.
$ourMail = "your_email@mail.com";so, instead of "your_email@mail.com" just input your email address and upload the file to your host. That's all! The contact form, widget and signup page will send all inquiries to your email address.
Google Map setup is a very easy process. All you have to do is to add the map iframe url where you wish.
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12609.73108660754!2d-122.47279800000001!3d37.803331!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808586e6302615a1%3A0x86bd130251757c00!2sStorey%20Ave%2C%20San%20Francisco%2C%20CA%2094129!5e0!3m2!1sen!2sus!4v1577174486999!5m2!1sen!2sus" height="450" style="border:0; width:100%;"></iframe>
That's all, your google map is setup and ready to use!
This template imports the following Javascript files. You can get more script info when clicking the appropriate link:
We've included some PSD files to make the re-design process a bit easier.
Please check the PSD folder for all included PSD files.
We've used the following images, icons and other resources as listed.